<template>
	<!-- 预览图片 -->
	<view class="preview">
		<text class="icon-close img-size-repeat" @touchmove.stop.prevent="" @tap="close"></text>
		<view class="preview-num font36 colorfff" @touchmove.stop.prevent="">{{cur + "/" + (arr && arr.length)}}</view>
		<swiper class="preview-swiper" :interval="3000" @touchmove.stop.prevent="" :current="cureent" @change="change">
			<swiper-item v-for="(item, index) in arr" :key="index">
				<view class="swiper-item">
					<image :src="item.img" mode="aspectFit"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="preview-content" v-if="content">
			<view class="font32 colorfff">@{{content.name}}</view>
			<view class="preview-attr font26 color888">{{ content.attr }}</view>
			<view class="preview-text font30 colorfff">{{ content.text }}</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			cur: 0,
			content: {}
		}
	},
	created() {
		this.cur = this.cureent + 1
		this.content = this.arr[this.cureent].content
	},
	methods: {
		// 关闭
		close() {
			this.$emit('close', false)
		},
		// 滑动
		change(e) {
			let idx = e.detail.current
			this.cur = idx + 1
			this.content = this.arr[idx].content
			this.$emit('changebanner', idx)
		}
	},
	/**
	 * arr是数组
	 * {
	 * 	 img: item,
	 * 	 content: {
	 * 			name: 名称,	
	 * 			attr: 属性,
	 * 			text: 内容,
	 * 		}
	 * 	}
	 */
	props: ['arr','cureent']
}
</script>

<style lang="scss">
.preview,
.preview-swiper,
.swiper-item {
	width: 100%;
	height: 100%;
}
.preview {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #000000;
	z-index: 999;
	.icon-close,
	.preview-num {
		position: absolute;
		z-index: 1;
		top: 114rpx;
	}
	.icon-close {
		left: 30rpx;
		width: 30rpx;
		height: 30rpx;
		background-image: url('/static/image/closeimg.png');
	}
	.preview-num {
		left: 50%;
		transform: translateX(-50%);
		letter-spacing: 1rpx;
	}
	image {
		width: 100%;
		height: 100%;
	}
	.preview-content {
		position: absolute;
		left: 0;
		bottom: 50rpx;
		width: 100%;
		height: 220rpx;
		padding: 0 30rpx;
		overflow-y: auto;
		letter-spacing: 1rpx;
		-webkit-overflow-scrolling: touch;
		.preview-attr {
			margin: 18rpx 0;
		}
		.preview-text {
			line-height: 46rpx;
		}
	}
}
</style>
